<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../resources/css/login.css">
</head>
<body>

<div class="container right-panel-active">
    <div class="container__form container--signup">
        <form action="loginProcessing.jsp" class="form" method="post" name="form1">
            <h2 class="form__title">登录</h2>
            <label>
                <input type="text" placeholder="用户名" class="input" name="username" autofocus="autofocus"/>
            </label>
            <label>
                <input type="password" placeholder="密码" class="input" name="password"/>
            </label>
            <button type="submit" class="btn" onclick="return checkForm1()">登录</button>
            <button class="btn" type="reset">重置</button>
        </form>
    </div>

    <div class="container__form container--signin">
        <form action="registerProcessing.jsp" class="form" method="post" name="form2">
            <h2 class="form__title">注册</h2>
            <label>
                <input type="text" placeholder="用户名" class="input" name="rename"/>
            </label>
            <label>
                <input type="password" placeholder="密码" class="input" name="repassword"/>
            </label>
            <label>
                <input type="password" placeholder="确认密码" class="input" name="relpassword"/>
            </label>
            <button class="btn" type="submit" onclick="return checkForm2()">注册</button>
            <button class="btn" type="reset">重置</button>
        </form>
    </div>

    <div class="container__overlay">
        <div class="overlay">
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">注册</button>
            </div>
            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">登录</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function checkForm1() {
        const name = form1.username.value;
        const pwd = form1.password.value;
        if (name === "" || name == null) {
            alert("请输入用户名");
            form1.rename.focus();
            return false;
        } else if (pwd === "" || pwd == null) {
            alert("请输入密码");
            form1.repassword.focus();
            return false;
        }
        return true;
    }
</script>

<script type="text/javascript">
    function checkForm2() {
        const name = form2.rename.value;
        const pwd = form2.repassword.value;
        const repwd = form2.relpassword.value;
        if (name === "" || name == null) {
            alert("请输入用户名");
            form2.rename.focus();
            return false;
        } else if (pwd === "" || pwd == null) {
            alert("请输入密码");
            form2.repassword.focus();
            return false;
        } else if (repwd === "" || repwd == null) {
            alert("请输入确认密码");
            form2.relpassword.focus();
            return false;
        } else if (pwd !== repwd) {
            alert("两次密码输入不一致，请重新输入!");
            form2.relpassword.focus();
            return false;
        }
        return true;
    }
</script>

<script>
    const signInBtn = document.getElementById("signIn");
    const signUpBtn = document.getElementById("signUp");
    const fistForm = document.getElementsByName("form1")
    const secondForm = document.getElementsByName("form2")
    const container = document.querySelector(".container");
    const s=document.get
    signInBtn.addEventListener("click", () => {
        container.classList.remove("right-panel-active");
    });
    signUpBtn.addEventListener("click", () => {
        container.classList.add("right-panel-active");
    });
    fistForm.addEventListener("submit", (e) => e.preventDefault());
    secondForm.addEventListener("submit", (e) => e.preventDefault());
</script>
</body>
</html>

